<script lang="ts">
import { reactive, defineComponent } from "vue";

export default defineComponent({
  name: "online-modal",
  title: "online modal",
  watch: {
    $route: {
      handler: function (val) {
        this.getDetail();
      },
      immediate: true,
    },
  },
  setup(props) {
    let data = reactive({
      dialogVisible: false,
      url: window.location.href,
    });
    const getDetail = () => {
      data.url = window.location.href;
    };
    const feacebook = () => {
      //获取当前路由
      window.open(
        `https://www.facebook.com/sharer/sharer.php?u=${data.url}`,
        "_blank",
        "width=500,height=400"
      );
    };
    const Twitter = () => {
      window.open(
        `https://twitter.com/share?url=${data.url}`,
        "_blank",
        "width=500,height=400"
      );
    };
    const LinkedIn = () => {
      window.open(
        `https://www.linkedin.com/shareArticle?url=${data.url}`,
        "_blank",
        "width=500,height=400"
      );
    };
    const Email = () => {
      window.open(
        `https://instagram.com/share?url=${data.url}`,
        "_blank",
        "width=500,height=400"
      );
    };

    const handleClose = () => {
      data.dialogVisible = false;
    };
    const handleOpen = () => {
      data.dialogVisible = true;
    };
    return {
      data,
      handleOpen,
      feacebook,
      Twitter,
      LinkedIn,
      Email,
      getDetail
    };
  },
});
</script>
<template>
  <div class="contactModal">
    <el-dialog width="50%" v-model="data.dialogVisible" title="Share">
      <el-row class="midContent">
        <el-col :span="6" class="flex align_center midText" @click="feacebook">
          <el-row class="smoll_box">
            <el-col>
              <i class="iconfont icon-facebook-fill"></i>
            </el-col>
            <el-col>
              <div class="contentText">
                <p>feacebook</p>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="flex align_center midText" @click="Twitter">
          <el-row class="smoll_box">
            <el-col>
              <i class="iconfont icon-twitter"></i>
            </el-col>
            <el-col>
              <div class="contentText">
                <p>Twitter</p>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="flex align_center midText" @click="LinkedIn">
          <el-row class="smoll_box">
            <el-col>
              <i class="iconfont icon-linkedin-fill"></i>
            </el-col>
            <el-col>
              <div class="contentText">
                <p>LinkedIn</p>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="flex align_center midText" @click="Email">
          <el-row class="smoll_box">
            <el-col>
              <i class="iconfont icon-instagram"></i>
            </el-col>
            <el-col>
              <div class="contentText">
                <p>instagram</p>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.align_center {
  // position: relative;
  cursor: pointer;

  .smoll_box {
    // position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .iconfont {
    font-size: 60px;
  }
}

.contactModal {
  .midContent {
    .smoll_box {
      margin-bottom: 10px;

      div {
        text-align: center;
      }
    }
  }

  .contentText {
    line-height: 2;
  }

  .supportIcon {
    font-size: 46px;
  }

  .whatsappIcon {
    color: #25d366;
  }

  .skypeIcon {
    color: #00aff0;
  }

  .foor_btn {
    margin-left: 30px;
  }

  :deep(.el-dialog)  {
    border-radius: 15px;
  }

  :deep(.el-dialog__body)  {
    margin: 0 50px;
    // height: 300px;
  }

  :deep(.el-dialog__header)  {
    margin: 0 50px;
    padding-top: 50px;
  }

  :deep(.el-dialog__title)  {
    font-size: 40px;
    color: #1d1d1f;
    font-family: alibabapuhuitiBold;
  }

  :deep(.el-dialog__headerbtn .el-dialog__close)  {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .contactModal {
    :deep(.el-dialog)  {
      border-radius: 8px;
      width: 96%;
    }

    .midContent {
      flex-direction: column;
    }

    .midText {
      justify-content: center;
    }

    .midMar {
      margin-top: 30px;
    }

    :deep(.el-dialog__body)  {
      margin: 0 50px;
      height: 300px;
    }

    :deep(.el-dialog__body)  {
      margin: 0 0px;
    }

    :deep(.el-dialog__header)  {
      margin: 0 0px;
      padding-top: 50px;
    }
  }
}
</style>